import * as React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Image,
  TextInput,
  TouchableWithoutFeedback,
} from 'react-native';
import BLine from '../../baseUI/b-line';
import BText from '../../baseUI/b-text';
import {SearchBar} from 'react-native-elements';
import API from '../../api/index';
import router from '../../util/router'
import BZero from '../../baseUI/b-zero';

export default class Search extends React.Component {
  state = {
    hotList: [
      {
        name: '西贝小面',
      },
      {
        name: 'nike鱼洞鞋',
      },
      {
        name: 'Mac pro',
      },
      {
        name: '二手笔记本',
      },
    ],
    history: [],
    search: '',
    searchList: [],
    pageSize: 10,
    pageIndex: 1,
  };

  getProjectList = () => {
    API.getProjectList({
      pageSize: this.state.pageSize,
      pageIndex: this.state.pageIndex,
      keyword: this.state.search,
    }).then((res) => {
      this.setState({
        searchList: res.data.list,
      });
    });
  };

  updateSearch = (search) => {
    this.setState({search}, this.getProjectList);
  };

  renderSForm() {
    const {search} = this.state;
    return (
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          alignItems: 'center',
          backgroundColor: '#fff',
        }}>
        <View
          style={{
            flex: 1,
          }}>
          <SearchBar
            containerStyle={{
              borderBottomColor: '#f4f4f4',
              borderBottomWidth: 1,
              backgroundColor: '#fff',
            }}
            inputContainerStyle={{
              height: 28,
              backgroundColor: '#f4f4f4',
            }}
            inputStyle={{
              fontSize: 14,
            }}
            cancelButtonTitle={
              <BText
                style={{
                  fontSize: 16,
                  fontWeight: '600',
                }}>
                取消
              </BText>
            }
            platform="ios"
            showCancel={false}
            placeholder="搜索关键字"
            onChangeText={this.updateSearch}
            value={search}
            onCancel={this.props.navigation.goBack}
            autoFocus={true}
          />
        </View>
      </View>
    );
  }

  renderStatic = () => {
    return (
      <View>
        {/* 历史搜索 */}
        <View
          style={{
            backgroundColor: '#fff',
            paddingBottom: 12,
          }}>
          <View
            style={{
              height: 40,
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 12,
            }}>
            <BText
              style={{
                fontSize: 14,
              }}>
              历史搜索
            </BText>
          </View>
          <BLine />
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              paddingHorizontal: 12,
              paddingTop: 12,
            }}>
            {this.state.hotList.map((item) => {
              return <BText style={styles.tag}>{item.name}</BText>;
            })}
          </View>
        </View>

        {/* 热门搜索 */}
        <View
          style={{
            backgroundColor: '#fff',
            paddingBottom: 12,
            marginTop: 10,
          }}>
          <View
            style={{
              height: 40,
              display: 'flex',
              flexDirection: 'row',
              alignItems: 'center',
              paddingHorizontal: 12,
            }}>
            <BText
              style={{
                fontSize: 14,
              }}>
              热门搜索
            </BText>
          </View>
          <BLine />
          <View
            style={{
              display: 'flex',
              flexDirection: 'row',
              paddingHorizontal: 12,
              paddingTop: 12,
            }}>
            {this.state.hotList.map((item) => {
              return <BText style={styles.tag}>{item.name}</BText>;
            })}
          </View>
        </View>
      </View>
    );
  };

  // 需求列表
  renderList = () => {
    const itemStl = {
      paddingHorizontal: 12,
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'space-between',
      backgroundColor: '#fff',
      paddingBottom: 10,
      paddingTop: 10,
      borderBottomColor: '#f5f5f5',
      borderBottomWidth: 1,
    }
    const itemTitleStl = {
      lineHeight: 30,
      fontSize: 14, 
    }
    const goDetail = (item) => {
      router.goH5ProjectDetail({
        projectId: item.id,
        navigation: this.props.navigation,
      })
    }
    if (!this.state.searchList.length) {
      return <BZero />
    }
    return (
      this.state.searchList.map((item, key) => {
        return (
          <TouchableWithoutFeedback onPress={() => goDetail(item)}>
            <View style={itemStl}>
              <BText style={itemTitleStl}>
                {key + 1}. {item.title}
              </BText>
              <BText>{item.userInfo.nickname}</BText>
            </View>
          </TouchableWithoutFeedback>
        );
      })
    )
  }

  render() {
    const wrapper = {
      flex: 1,
      display: 'flex',
      backgroundColor: '#fff', 
    }
    const container = {
      flex: 1,
      backgroundColor: '#f5f5f5',
    }
    return (
      <SafeAreaView style={wrapper}>
        <View style={container}>
          {this.renderSForm()}
          {this.state.search ? this.renderList() : this.renderStatic()}
        </View>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  tag: {
    paddingHorizontal: 8,
    paddingVertical: 2,
    backgroundColor: '#f5f5f5',
    marginRight: 8,
  },
});
